import * as echarts from 'echarts'
export const getChartOne = (dom) => {
  let chart = echarts.init(dom)
  let colorData = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: 'rgba(41, 215, 227, 1)'
    },
    {
      offset: 1,
      color: 'rgba(0, 85, 255, 0)'
    }
  ])
  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,45,74,0.85)',
      borderColor: 'rgb(140,255,74)', //设置边框颜色
      padding: 12,
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        fontSize: 40,
        color: '#fff'
      },
      formatter: (params) => {
        let arr = [...params]
        let str = ''
        arr.forEach((item, index) => {
          if (item.componentSubType == 'line') {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              item.color +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '%' +
              '<br />'
          } else {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              'rgba(41, 215, 227, 1)' +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '<br />'
          }
        })
        str = arr[0].name + '<br />' + str
        return str
      }
    },
    legend: {
      // data: ["能源消费总量", "能耗强度"],
      top: '10%',
      textStyle: {
        fontSize: 40,
        color: '#fff',
        padding: [0, 8]
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: 200,
      padding: '0 0 10 0',
      containLabel: true
    },
    xAxis: {
      data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        textStyle: {
          padding: [14, 0, 0, 0],
          fontSize: 40,
          color: '#fff'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '亿吨',
        nameTextStyle: {
          color: '#fff',
          fontSize: 40,
          padding: [0, 0, 60, -20]
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 40
          }
        }
      },
      {
        type: 'value',
        name: '%',
        nameTextStyle: {
          color: '#fff',
          fontSize: 40,
          padding: [0, 0, 40, 40]
        },
        position: 'right',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 40
          }
        }
      }
    ],
    series: [
      {
        name: '发电量',
        // barMinHeight: 10,
        type: 'bar',
        barWidth: '18%',
        itemStyle: {
          normal: {
            borderRadius: [12, 12, 0, 0],
            borderColor: colorData,
            borderWidth: 5,
            //渐变色
            // color: colorData
            color: function (params) {
              return params.name == '2024' ? 'rgba(20, 157, 220, 0)' : colorData // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            }
          }
        },
        data: [35, 38, 40, 42, 44, 42, 46, 48.57]
        // z: 10,
      },
      {
        name: '增速',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'rgba(255, 195, 0, 1)',
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          color: 'rgba(255, 195, 0, 1)',
          width: 5
        },
        data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
      }
      // {
      //   name: "hill",
      //   type: "bar",
      //   barWidth: "20%",
      //   symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      //   itemStyle: {
      //     normal: {
      //       color: "rgba(11,47,68,.2)",
      //     },
      //   },
      //   data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      //   z: 9,
      // },
    ]
  }

  chart.setOption(option, true)
}

export const getChartTwo = (dom) => {
  let chart = echarts.init(dom)
  let colorData = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: 'rgba(41, 215, 227, 1)'
    },
    {
      offset: 1,
      color: 'rgba(0, 85, 255, 0)'
    }
  ])
  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(8,45,74,0.85)',
      borderColor: 'rgb(140,255,74)', //设置边框颜色
      padding: 12,
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        fontSize: 40,
        color: '#fff'
      },
      formatter: (params) => {
        let arr = [...params]
        let str = ''
        arr.forEach((item, index) => {
          if (item.componentSubType == 'line') {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              item.color +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '%' +
              '<br />'
          } else {
            str +=
              '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              'rgba(41, 215, 227, 1)' +
              ';"></span>' +
              item.seriesName +
              '  ' +
              item.data +
              '<br />'
          }
        })
        str = arr[0].name + '<br />' + str
        return str
      }
    },
    legend: {
      // data: ["能源消费总量", "能耗强度"],
      top: '10%',
      textStyle: {
        fontSize: 40,
        color: '#fff',
        padding: [0, 8]
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: 200,
      padding: '0 0 10 0',
      containLabel: true
    },
    xAxis: {
      data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        textStyle: {
          padding: [14, 0, 0, 0],
          fontSize: 40,
          color: '#fff'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '万亿千瓦时',
        nameTextStyle: {
          color: '#fff',
          fontSize: 40,
          padding: [0, 0, 60, -20]
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: true
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 40
          }
        }
      },
      {
        type: 'value',
        name: '%',
        nameTextStyle: {
          color: '#fff',
          fontSize: 40,
          padding: [0, 0, 40, 40]
        },
        position: 'right',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 40
          }
        }
      }
    ],
    series: [
      {
        name: '发电量',
        // barMinHeight: 10,
        type: 'pictorialBar',
        barCategoryGap: '30%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          normal: {
            borderColor: colorData,
            borderWidth: 5,
            //渐变色
            // color: colorData
            color: function (params) {
              return params.name == '2024' ? 'rgba(20, 157, 220, 0)' : colorData // 如果是最后一个柱子则设置为透明，否则设置为默认颜色
            }
          }
        },
        data: [70, 60, 80, 20, 30, 44, 53, 67, 32, 23]
        // z: 10,
      },
      {
        name: '增速',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 20, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'rgba(255, 195, 0, 1)',
          borderColor: '#fff',
          borderWidth: 5
        },
        lineStyle: {
          color: 'rgba(255, 195, 0, 1)',
          width: 5
        },
        data: [42, 38, 48, 35, 29, 28, 3, 5, 99, 122]
      }
      // {
      //   name: "hill",
      //   type: "bar",
      //   barWidth: "20%",
      //   symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      //   itemStyle: {
      //     normal: {
      //       color: "rgba(11,47,68,.2)",
      //     },
      //   },
      //   data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      //   z: 9,
      // },
    ]
  }

  chart.setOption(option, true)
}

export const getCharThree = (dom) => {
  let chart = echarts.init(dom)
  let information = {
    area: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
    legend: ['新疆', '陕西', '山西', '内蒙古', '其他'],
    data: [
      [0.4, 0.3, 0.4, 1, 1.2, 1.4, 1.3],
      [1.6, 1.4, 1.5, 1.6, 1.8, 1.2, 1.3],
      [2, 1.8, 1.7, 2, 1, 2, 1.5],
      [2.3, 1.9, 1.7, 1.7, 1.6, 1.5, 2],
      [2.3, 2.2, 1.4, 1.6, 1.8, 1.5, 1.6]
    ],
    colors: ['#40BDC7', '#7454C2', '#D3B357', '#51A1D1', '#F2912F']
  }
  let option = {
    // backgroundColor: '#021032',
    color: information.colors,
    legend: {
      top: 50,
      width: 600, // 控制legend的总宽度
      itemWidth: 16,
      itemHeight: 16,
      icon: 'rect',
      textStyle: {
        //图例文字的样式
        color: '#b4e4ff',
        fontSize: 40,
        // 给出高度和rich对象，实现图标与文字居中对齐
        rich: {
          a: {
            verticalAlign: 'middle'
          }
        }
      },
      data: information.legend
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(9,40,84,0.8)',
      borderColor: 'rgba(9,40,84,0.8)',
      textStyle: {
        fontSize: 20,
        color: '#fff'
      },
      formatter: function (params) {
        // 加x轴名称
        var res = params[0].name + "<br/><div style=''>"
        for (var i = 0, l = params.length; i < l; i++) {
          // 创建 marker 标签
          var color = params[i].color // 获取系列颜色
          res +=
            "<div style='display:flex; justify-content:space-between;'><div><span style='margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background-color:" +
            color +
            ";'></span>"
          res +=
            params[i].seriesName +
            '</div>&nbsp;&nbsp;&nbsp;&nbsp;' +
            "<span style='font-weight: bold;'>" +
            params[i].value +
            '</span></div>'
        }
        res += '</div>'
        return res
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '8%',
      top: '24%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#b4e4ff',
        fontSize: 40,
        margin: 20
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.3)',
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        // interval: information.area.length,
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.1)',
          width: 2
        }
      },
      data: information.area
    },
    yAxis: {
      name: '亿吨',
      nameLocation: 'end',
      nameTextStyle: {
        color: '#b4e4ff',
        fontSize: 40,
        padding: [0, 0, 60, -20]
      },
      type: 'value',
      axisLabel: {
        color: '#b4e4ff',
        fontSize: 40
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.3)',
          width: 2
        }
      },
      axisTick: {
        show: false
      },

      splitArea: {
        show: false,
        areaStyle: {
          color: ['rgba(255,255,255,0)', 'rgba(18, 63, 115, 0.3)']
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.1)'
        }
      }
    },
    series: []
  }

  for (var i = 0; i < information.legend.length; i++) {
    option.series.push({
      name: information.legend[i],
      type: 'bar',
      stack: '总用电',
      barWidth: '25%',
      label: {
        show: false,
        position: 'insideRight'
      },
      data: information.data[i]
    })
  }
  chart.setOption(option, true)
}

export const getChartFour = (dom) => {
  let chart = echarts.init(dom)
  let information = {
    area: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
    legend: ['俄罗斯', '蒙古', '印度尼西亚', '澳大利亚', '其他'],
    data: [
      [2900, 2700, 3000, 2600, 2790, 4500, 4500],
      [2300, 2800, 2000, 2100, 2800, 2700, 2600],
      [4200, 4500, 5500, 6000, 2800, 2500, 2500],
      [10000, 10000, 9800, 9500, 14000, 12000, 27000],
      [2200, 2100, 2800, 3000, 5000, 4000, 6000]
    ],
    colors: ['#37B7C0', '#653ECB', '#B99025', '#2A9FEB', '#B1411C']
  }

  let option = {
    color: information.colors,
    legend: {
      top: 50,
      width: 800, // 控制legend的总宽度
      itemWidth: 16,
      itemHeight: 16,
      icon: 'rect',
      textStyle: {
        //图例文字的样式
        color: '#b4e4ff',
        fontSize: 40,
        // 给出高度和rich对象，实现图标与文字居中对齐
        rich: {
          a: {
            verticalAlign: 'middle'
          }
        }
      },
      data: information.legend
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(9,40,84,0.8)',
      borderColor: 'rgba(9,40,84,0.8)',
      textStyle: {
        fontSize: 20,
        color: '#fff'
      },
      formatter: function (params) {
        // 加x轴名称
        var res = params[0].name + "<br/><div style=''>"
        for (var i = 0, l = params.length; i < l; i++) {
          // 创建 marker 标签
          var color = params[i].color // 获取系列颜色
          res +=
            "<div style='display:flex; justify-content:space-between;'><div><span style='margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background-color:" +
            color +
            ";'></span>"
          res +=
            params[i].seriesName +
            '</div>&nbsp;&nbsp;&nbsp;&nbsp;' +
            "<span style='font-weight: bold;'>" +
            params[i].value +
            '</span></div>'
        }
        res += '</div>'
        return res
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '8%',
      top: '24%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#b4e4ff',
        fontSize: 40,
        margin: 20
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.3)',
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        // interval: information.area.length,
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.1)',
          width: 4
        }
      },
      data: information.area
    },
    yAxis: {
      name: '万吨',
      nameLocation: 'end',
      nameTextStyle: {
        color: '#b4e4ff',
        fontSize: 40,
        padding: [0, 0, 60, -20]
      },
      type: 'value',
      axisLabel: {
        color: '#b4e4ff',
        fontSize: 40
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.3)',
          width: 2
        }
      },
      axisTick: {
        show: false
      },

      splitArea: {
        show: false,
        areaStyle: {
          color: ['rgba(255,255,255,0)', 'rgba(18, 63, 115, 0.3)']
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(180, 228, 255, 0.1)'
        }
      }
    },
    series: []
  }
  for (var i = 0; i < information.legend.length; i++) {
    option.series.push({
      name: information.legend[i],
      type: 'bar',
      stack: '总用电',
      barWidth: '25%',
      label: {
        show: false,
        position: 'insideRight'
      },
      data: information.data[i]
    })
  }
  chart.setOption(option, true)
}
